<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			::-webkit-scrollbar-track-piece {
				width: 13px;
				border-right: 1px solid #EEE;
				border-left: 1px solid #e4e4e4;
				background-color: #f0f0f0;
				background-image: -webkit-linear-gradient(left, #f0f0f0, #FFF)
			}
			
			::-webkit-scrollbar {
				width: 13px;
				height: 13px
			}
			
			::-webkit-scrollbar-thumb {
				position: relative;
				min-height: 25px;
				border-radius: 9999px;
				background-color: #c2c2c2;
				background-clip: padding-box
			}
			
			::-webkit-scrollbar-thumb:vertical {
				border-top: 0 solid transparent;
				border-right: 2px solid transparent;
				border-bottom: 0 solid transparent;
				border-left: 3px solid transparent
			}
			
			::-webkit-scrollbar-thumb:horizontal {
				border-top: 3px solid transparent;
				border-right: 0 solid transparent;
				border-bottom: 2px solid transparent;
				border-left: 0 solid transparent
			}
			
			::-webkit-scrollbar-thumb:hover {
				background-color: #999;
			}
			
			::-webkit-scrollbar-thumb:active {
				background-color: #7d7d7d
			}
			
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				border: none;
			}
			
			body {
				font: normal 12px/normal '宋体';
			}
			
			a {
				text-decoration: none;
			}
			
			a:hover {
				text-decoration: underline;
			}
			
			/*星期更新*/
			.weeks {
				width: 500px;
				height: 250px;
				margin: 100px auto;
				border: 1px solid #555;
			}
			
			.weekItem {
				width: 500px;
				height: 30px;
				border-bottom: 2px solid #444;
			}
			
			.weekItem li {
				float: left;
				height: 30px;
				width: 71px;
				line-height: 30px;
				text-align: center;
				cursor: pointer;
				overflow: hidden;
			}
			
			.weekItem li.on {
				background: #444;
				color: #fff;
				width: 74px;
			}
			
			.weekItem li.hover {
				background: #555;
				color: #fff;
			}
			
			.box01_c {
				width: 500px;
				height: 208px;
				padding: 10px 0 0px 0;
				position: relative;
				overflow: auto;
			}
			
			.box01_c dl {
				padding: 0 10px 10px 25px;
				line-height: 26px;
			}
			
			.box01_c dl dt {
				color: #999;
				line-height: 1;
				padding-bottom: 10px;
			}
			
			.box01_c dl dd {
				height: 26px;
				overflow: hidden;
			}
			
			.box01_c dl dd a {
				color: #282828;
			}
			
		</style>
		<div class="weeks">
			<ul class="weekItem" id="weektab">
				<li>周一</li>
				<li>周二</li>
				<li>周三</li>
				<li>周四</li>
				<li>周五</li>
				<li>周六</li>
				<li>周日</li>
			</ul>
			<div class="box01_c" id="weekcon">
				<div style="position:relative;">
					<dl>
						<dt>周一</dt>
						<dd>111</dd>
						<dd>111</dd>
						<dd>111</dd>
						<dd>111</dd>
						<dd>111</dd>
						<dd>111</dd>
						<dd>111</dd>
						<dd>111</dd>
						
					</dl>
					<dl>
						<dt>周二</dt>
						<dd>222</dd>
						<dd>222</dd>
						<dd>222</dd>
						<dd>222</dd>
						<dd>222</dd>
						<dd>222</dd>
						<dd>222</dd>
						<dd>222</dd>
					</dl>
					<dl>
						<dt>周三</dt>
						<dd>333</dd>
						<dd>333</dd>
						<dd>333</dd>
						<dd>333</dd>
						<dd>333</dd>
						<dd>333</dd>
						<dd>333</dd>
						<dd>333</dd>
					</dl>
					<dl>
						<dt>周四</dt>
						<dd>444</dd>
						<dd>444</dd>
						<dd>444</dd>
						<dd>444</dd>
						<dd>444</dd>
						<dd>444</dd>
						<dd>444</dd>
						<dd>444</dd>
					</dl>
					<dl>
						<dt>周五</dt>
						<dd>555</dd>
						<dd>555</dd>
						<dd>555</dd>
						<dd>555</dd>
						<dd>555</dd>
						<dd>555</dd>
						<dd>555</dd>
						<dd>555</dd>
					</dl>
					<dl>
						<dt>周六</dt>
						<dd>666</dd>
						<dd>666</dd>
						<dd>666</dd>
						<dd>666</dd>
						<dd>666</dd>
						<dd>666</dd>
						<dd>666</dd>
						<dd>666</dd>
					</dl>
					<dl>
						<dt>周日</dt>
						<dd>777</dd>
						<dd>777</dd>
						<dd>777</dd>
						<dd>777</dd>
						<dd>777</dd>
						<dd>777</dd>
						<dd>777</dd>
						<dd>777</dd>
					</dl>
				</div>
			</div>
		</div>
		<script src="js/jq_3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function week_init() {
				$("#weektab li").each(function(i) {
					$(this).click(function() {
						week_click(i);
					}).hover(function() {
						$(this).addClass('hover');
					}, function(event) {
						$(this).removeClass('hover');
					});
				});
				var w = new Date().getDay();
				if (w == 0) {
					w = 6;
				} else {
					w = w - 1;
				}
				week_click(w);
				$("#weekcon dl:last").css({
					"padding-bottom": "0",
					"margin-bottom": "10px"
				});
			}
			
			function week_click(num) {
				$("#weektab li").removeClass('on').eq(num).addClass('on');
				$curdl = $("#weekcon dl").eq(num);
				var posi = $curdl.position();
				$("#weekcon").animate({
					scrollTop: posi.top
				}, 200);
			}
			$(function() {
			
				week_init();
			});
		</script>
	</body>
</html>
